[Dashboard] show fullscreen mode when url has fullScreenMode param #196275

lsq645599166 · 2024-10-15T10:47:57Z

Summary

Closes #174561

Show fullscreen mode when url has fullScreenMode param &_a=(fullScreenMode:!t)

Screenshot

src/plugins/dashboard/common/dashboard_container/types.ts

lsq645599166 · 2024-10-18T10:33:52Z

@elasticmachine merge upstream

lsq645599166 · 2024-10-21T02:45:28Z

@elasticmachine merge upstream

Heenawter

@nreese I am defaulting to your opinion here :) I think that fullscreenMode belongs under InitialComponentState, but our current URL logic is tied to the old DashboardContainerInput type. What is the best way to handle this, do you think? Should we just keep it under DashboardContainerInput and you can address it in your refactor?

src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx

lsq645599166 · 2024-10-21T14:39:46Z

@nreese I am defaulting to your opinion here :) I think that fullscreenMode belongs under InitialComponentState, but our current URL logic is tied to the old DashboardContainerInput type. What is the best way to handle this, do you think? Should we just keep it under DashboardContainerInput and you can address it in your refactor?

This involves a lot of parameters and attributes, so I can't give a precise answer. Maybe maintaining the status quo is a better choice.

nreese · 2024-10-21T14:41:47Z

@nreese I am defaulting to your opinion here :) I think that fullscreenMode belongs under InitialComponentState, but our current URL logic is tied to the old DashboardContainerInput type. What is the best way to handle this, do you think? Should we just keep it under DashboardContainerInput and you can address it in your refactor?

Putting fullscreenMode into InitialComponentState makes the most sense

nreese · 2024-10-21T14:54:56Z

This involves a lot of parameters and attributes, so I can't give a precise answer. Maybe maintaining the status quo is a better choice.

How about just putting fullScreenMode as a top level key in creationOptions, Then its value can just be read directly from the URL params instead of using loadAndRemoveDashboardState utility

See it will look something like this

const getCreationOptions = useCallback((): Promise<DashboardCreationOptions> => {
    const searchSessionIdFromURL = getSearchSessionIdFromURL(history);
    const getInitialInput = () => {
      const stateFromLocator = loadDashboardHistoryLocationState(getScopedHistory);
      const initialUrlState = loadAndRemoveDashboardState(kbnUrlStateStorage);

      // Override all state with URL + Locator input
      return {
        // State loaded from the dashboard app URL and from the locator overrides all other dashboard state.
        ...initialUrlState,
        ...stateFromLocator,

        // if print mode is active, force viewMode.PRINT
        ...(screenshotModeService.isScreenshotMode() &&
        screenshotModeService.getScreenshotContext('layout') === 'print'
          ? { viewMode: ViewMode.PRINT }
          : {}),
      };
    };

    return Promise.resolve<DashboardCreationOptions>({
      getIncomingEmbeddable: () =>
        embeddableService.getStateTransfer().getIncomingEmbeddablePackage(DASHBOARD_APP_ID, true),

      // integrations
      useSessionStorageIntegration: true,
      useUnifiedSearchIntegration: true,
      unifiedSearchSettings: {
        kbnUrlStateStorage,
      },
      useSearchSessionsIntegration: true,
      searchSessionSettings: {
        createSessionRestorationDataProvider,
        sessionIdToRestore: searchSessionIdFromURL,
        sessionIdUrlChangeObservable: getSessionURLObservable(history),
        getSearchSessionIdFromURL: () => getSearchSessionIdFromURL(history),
        removeSessionIdFromUrl: () => removeSearchSessionIdFromURL(kbnUrlStateStorage),
      },
      getInitialInput,
      validateLoadedSavedObject: validateOutcome,
      fullScreenMode: kbnUrlStateStorage.get<{ fullScreenMode?: boolean }>(
        DASHBOARD_STATE_STORAGE_KEY
      )?.fullScreenMode ?? false;
      isEmbeddedExternally: Boolean(embedSettings), // embed settings are only sent if the dashboard URL has `embed=true`
      getEmbeddableAppContext: (dashboardId) => ({
        currentAppId: DASHBOARD_APP_ID,
        getCurrentPath: () => `#${createDashboardEditUrl(dashboardId)}`,
      }),
    });
  }, [history, embedSettings, validateOutcome, getScopedHistory, kbnUrlStateStorage]);

lsq645599166 · 2024-10-21T16:10:53Z

This involves a lot of parameters and attributes, so I can't give a precise answer. Maybe maintaining the status quo is a better choice.

How about just putting fullScreenMode as a top level key in creationOptions, Then its value can just be read directly from the URL params instead of using loadAndRemoveDashboardState utility

See it will look something like this

const getCreationOptions = useCallback((): Promise<DashboardCreationOptions> => {
    const searchSessionIdFromURL = getSearchSessionIdFromURL(history);
    const getInitialInput = () => {
      const stateFromLocator = loadDashboardHistoryLocationState(getScopedHistory);
      const initialUrlState = loadAndRemoveDashboardState(kbnUrlStateStorage);

      // Override all state with URL + Locator input
      return {
        // State loaded from the dashboard app URL and from the locator overrides all other dashboard state.
        ...initialUrlState,
        ...stateFromLocator,

        // if print mode is active, force viewMode.PRINT
        ...(screenshotModeService.isScreenshotMode() &&
        screenshotModeService.getScreenshotContext('layout') === 'print'
          ? { viewMode: ViewMode.PRINT }
          : {}),
      };
    };

    return Promise.resolve<DashboardCreationOptions>({
      getIncomingEmbeddable: () =>
        embeddableService.getStateTransfer().getIncomingEmbeddablePackage(DASHBOARD_APP_ID, true),

      // integrations
      useSessionStorageIntegration: true,
      useUnifiedSearchIntegration: true,
      unifiedSearchSettings: {
        kbnUrlStateStorage,
      },
      useSearchSessionsIntegration: true,
      searchSessionSettings: {
        createSessionRestorationDataProvider,
        sessionIdToRestore: searchSessionIdFromURL,
        sessionIdUrlChangeObservable: getSessionURLObservable(history),
        getSearchSessionIdFromURL: () => getSearchSessionIdFromURL(history),
        removeSessionIdFromUrl: () => removeSearchSessionIdFromURL(kbnUrlStateStorage),
      },
      getInitialInput,
      validateLoadedSavedObject: validateOutcome,
      fullScreenMode: kbnUrlStateStorage.get<{ fullScreenMode?: boolean }>(
        DASHBOARD_STATE_STORAGE_KEY
      )?.fullScreenMode ?? false;
      isEmbeddedExternally: Boolean(embedSettings), // embed settings are only sent if the dashboard URL has `embed=true`
      getEmbeddableAppContext: (dashboardId) => ({
        currentAppId: DASHBOARD_APP_ID,
        getCurrentPath: () => `#${createDashboardEditUrl(dashboardId)}`,
      }),
    });
  }, [history, embedSettings, validateOutcome, getScopedHistory, kbnUrlStateStorage]);

Thanks, I fixed it and can you take a look

elasticmachine · 2024-10-21T16:31:59Z

Pinging @elastic/kibana-presentation (Team:Presentation)

Heenawter · 2024-10-21T16:34:17Z

buildkite test this

Heenawter · 2024-10-21T16:34:29Z

@elasticmachine run buildkite/docs-build-pr

Heenawter · 2024-10-21T21:51:31Z

@lsq645599166 Here's a screenshot of the type errors:

lsq645599166 · 2024-10-22T08:08:55Z

@lsq645599166 Here's a screenshot of the type errors:

Thanks and fixed

Heenawter · 2024-10-22T13:59:26Z

buildkite test this

Heenawter · 2024-10-22T13:59:39Z

@elasticmachine run buildkite/docs-build-pr

nreese · 2024-10-22T15:57:45Z

src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx

@@ -123,13 +123,6 @@ export function InternalDashboardTopNav({
    dashboardTitleRef.current?.focus();
  }, [title, viewMode]);

-  /**


Why is this removed?

If keep this, the top nav will disappear and reappear like below

20241023-001416.mp4

And for embed mode, this function will ensure it works fine

kibana/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx

Lines 111 to 134 in 3bd11ce

private initVisibility(application: StartDeps['application']) {

// Start off the chrome service hidden if "embed" is in the hash query string.

const isEmbedded = 'embed' in parse(location.hash.slice(1), true).query;

this.isForceHidden$ = new BehaviorSubject(isEmbedded);

const appHidden$ = merge(

// For the isVisible$ logic, having no mounted app is equivalent to having a hidden app

// in the sense that the chrome UI should not be displayed until a non-chromeless app is mounting or mounted

of(true),

application.currentAppId$.pipe(

mergeMap((appId) =>

application.applications$.pipe(

map((applications) => {

return !!appId && applications.has(appId) && !!applications.get(appId)!.chromeless;

})

)

)

)

);

this.isVisible$ = combineLatest([appHidden$, this.isForceHidden$]).pipe(

map(([appHidden, forceHidden]) => !appHidden && !forceHidden),

takeUntil(this.stop$)

);

}

If there is a better way, I will fix it.

Heenawter · 2024-10-24T15:34:52Z

buildkite test this

Heenawter · 2024-10-24T15:35:00Z

@elasticmachine run buildkite/docs-build-pr

elasticmachine · 2024-10-24T17:22:22Z

💚 Build Succeeded

Buildkite Build
Commit: 2d5faf3

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`dashboard`	124	125	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`dashboard`	643.0KB	643.2KB	+139.0B

Unknown metric groups

API count

id	before	after	diff
`dashboard`	129	130	+1

History

💚 Build #244682 succeeded 3bd11ce
💔 Build #244379 failed 267aab2

Heenawter

Changes LGTM - code review + local testing. Thanks so much for tackling this 🙇

kibanamachine · 2024-10-24T20:49:59Z

Starting backport for target branches: 8.15, 8.16, 8.x

https://github.com/elastic/kibana/actions/runs/11507245328

…lastic#196275) ## Summary Closes elastic#174561 Show fullscreen mode when url has fullScreenMode param `&_a=(fullScreenMode:!t)` ### Screenshot ![20241015-184503](https://github.com/user-attachments/assets/fae01dcc-f081-4314-84f9-3923adc76e5b) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com> (cherry picked from commit 72c0b81)

kibanamachine · 2024-10-24T20:55:19Z

💔 Some backports could not be created

Status	Branch	Result
❌	8.15	Backport failed because of merge conflicts
✅	8.16
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Manual backport

To create the backport manually run:

node scripts/backport --pr 196275

Questions ?

Please refer to the Backport tool documentation

kibanamachine · 2024-10-24T21:13:40Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11507553634

…lastic#196275) ## Summary Closes elastic#174561 Show fullscreen mode when url has fullScreenMode param `&_a=(fullScreenMode:!t)` ### Screenshot ![20241015-184503](https://github.com/user-attachments/assets/fae01dcc-f081-4314-84f9-3923adc76e5b) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com> (cherry picked from commit 72c0b81)

kibanamachine · 2024-10-24T21:18:21Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…aram (#196275) (#197728) # Backport This will backport the following commits from `main` to `8.16`: - [[Dashboard] show fullscreen mode when url has fullScreenMode param (#196275)](#196275)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Henry Liu <645599166@qq.com>

…ram (#196275) (#197729) # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] show fullscreen mode when url has fullScreenMode param (#196275)](#196275)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Henry Liu <645599166@qq.com>

[Dashboard] show fullscreen mode when url has fullScreenMode param

0efa4eb

lsq645599166 requested a review from a team as a code owner October 15, 2024 10:47

kibanamachine added the 💝community label Oct 15, 2024

Heenawter self-requested a review October 15, 2024 14:52

Heenawter reviewed Oct 15, 2024

View reviewed changes

src/plugins/dashboard/common/dashboard_container/types.ts Outdated Show resolved Hide resolved

[Dashboard] save fullScreenMode state in type InitialComponentState

772e8a3

Merge branch 'main' into fix/fullscreen_url_param

4489813

Merge branch 'main' into fix/fullscreen_url_param

78fd591

Heenawter reviewed Oct 21, 2024

View reviewed changes

src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx Outdated Show resolved Hide resolved

[Dashboard] put fullScreenMode as a top level key in creationOptions

267aab2

Heenawter added the Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas label Oct 21, 2024

Heenawter added release_note:fix loe:small Small Level of Effort impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. labels Oct 21, 2024

Heenawter added backport:version Backport to applied version labels v8.16.0 v8.17.0 v8.15.4 and removed v8.16.0 backport:version Backport to applied version labels v8.17.0 labels Oct 21, 2024

Heenawter added backport:prev-major Backport to (8.x, 8.17, 8.16, 8.15) the previous major branch and other branches in development and removed v8.15.4 labels Oct 21, 2024

[Dashboard] fix type lint

3bd11ce

nreese reviewed Oct 22, 2024

View reviewed changes

Merge branch 'main' into fix/fullscreen_url_param

2d5faf3

Heenawter approved these changes Oct 24, 2024

View reviewed changes

Heenawter merged commit 72c0b81 into elastic:main Oct 24, 2024
21 checks passed

kibanamachine added the v9.0.0 label Oct 24, 2024

kibanamachine mentioned this pull request Oct 24, 2024

[8.16] [Dashboard] show fullscreen mode when url has fullScreenMode param (#196275) #197728

Merged

kibanamachine mentioned this pull request Oct 24, 2024

[8.x] [Dashboard] show fullscreen mode when url has fullScreenMode param (#196275) #197729

Merged

Heenawter added backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) and removed backport:prev-major Backport to (8.x, 8.17, 8.16, 8.15) the previous major branch and other branches in development labels Oct 24, 2024

kibanamachine added the v8.16.0 label Oct 24, 2024

kibanamachine added the v8.17.0 label Oct 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard] show fullscreen mode when url has fullScreenMode param #196275

[Dashboard] show fullscreen mode when url has fullScreenMode param #196275

lsq645599166 commented Oct 15, 2024 •

edited by kibanamachine

Loading

lsq645599166 commented Oct 18, 2024

lsq645599166 commented Oct 21, 2024

Heenawter left a comment

lsq645599166 commented Oct 21, 2024

nreese commented Oct 21, 2024

nreese commented Oct 21, 2024

lsq645599166 commented Oct 21, 2024

elasticmachine commented Oct 21, 2024

Heenawter commented Oct 21, 2024

Heenawter commented Oct 21, 2024

Heenawter commented Oct 21, 2024

lsq645599166 commented Oct 22, 2024

Heenawter commented Oct 22, 2024

Heenawter commented Oct 22, 2024

nreese Oct 22, 2024

lsq645599166 Oct 22, 2024

Heenawter commented Oct 24, 2024

Heenawter commented Oct 24, 2024

elasticmachine commented Oct 24, 2024

API count

Heenawter left a comment

kibanamachine commented Oct 24, 2024

kibanamachine commented Oct 24, 2024

kibanamachine commented Oct 24, 2024

kibanamachine commented Oct 24, 2024

	private initVisibility(application: StartDeps['application']) {
	// Start off the chrome service hidden if "embed" is in the hash query string.
	const isEmbedded = 'embed' in parse(location.hash.slice(1), true).query;
	this.isForceHidden$ = new BehaviorSubject(isEmbedded);

	const appHidden$ = merge(
	// For the isVisible$ logic, having no mounted app is equivalent to having a hidden app
	// in the sense that the chrome UI should not be displayed until a non-chromeless app is mounting or mounted
	of(true),
	application.currentAppId$.pipe(
	mergeMap((appId) =>
	application.applications$.pipe(
	map((applications) => {
	return !!appId && applications.has(appId) && !!applications.get(appId)!.chromeless;
	})
	)
	)
	)
	);
	this.isVisible$ = combineLatest([appHidden$, this.isForceHidden$]).pipe(
	map(([appHidden, forceHidden]) => !appHidden && !forceHidden),
	takeUntil(this.stop$)
	);
	}

[Dashboard] show fullscreen mode when url has fullScreenMode param #196275

[Dashboard] show fullscreen mode when url has fullScreenMode param #196275

Conversation

lsq645599166 commented Oct 15, 2024 • edited by kibanamachine Loading

Summary

Screenshot

lsq645599166 commented Oct 18, 2024

lsq645599166 commented Oct 21, 2024

Heenawter left a comment

Choose a reason for hiding this comment

lsq645599166 commented Oct 21, 2024

nreese commented Oct 21, 2024

nreese commented Oct 21, 2024

lsq645599166 commented Oct 21, 2024

elasticmachine commented Oct 21, 2024

Heenawter commented Oct 21, 2024

Heenawter commented Oct 21, 2024

Heenawter commented Oct 21, 2024

lsq645599166 commented Oct 22, 2024

Heenawter commented Oct 22, 2024

Heenawter commented Oct 22, 2024

nreese Oct 22, 2024

Choose a reason for hiding this comment

lsq645599166 Oct 22, 2024

Choose a reason for hiding this comment

Heenawter commented Oct 24, 2024

Heenawter commented Oct 24, 2024

elasticmachine commented Oct 24, 2024

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Async chunks

API count

History

Heenawter left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 24, 2024

kibanamachine commented Oct 24, 2024

💔 Some backports could not be created

Manual backport

Questions ?

kibanamachine commented Oct 24, 2024

kibanamachine commented Oct 24, 2024

💚 All backports created successfully

Questions ?

lsq645599166 commented Oct 15, 2024 •

edited by kibanamachine

Loading